<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
        收集表单数据：
            若<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
            若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value的值。
            若<input type="checkbox"/>
                1、没有配置input的value属性，name收集的就是checked(勾选 or 未勾选，是布尔值)
                2、配置input的value属性：
                    （1）v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                    （2）v-model的初始值是数组，那么收集的就是value组成的数组
            备注：v-model三个修饰符：
                    lazy：失去焦点再收集数据
                    number：输入字符串转为有效的数字
                    trim：输入首位空格过滤
     -->
    <div id="root">
        <form @submit.prevent ="showInfo">
            <label for="account">账号：</label>
            <input type="text" id="account" v-model.trim="userInfo.account"><br/><br/>
            <label for="passwd">密码：</label>
            <input type="password" id="passwd" v-model="userInfo.password"><br/><br/>
            <label for="account">年龄：</label>
            <input type="number" id="account" v-model.number="userInfo.age"><br/><br/>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>
            爱好：
            学习<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox"name="hobby" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox"name="hobby" v-model="userInfo.hobby" value="eat"><br/><br/>
            所属校区：
            <select v-model="userInfo.city">
                <option>请选择所属校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>

            </select><br/><br/>
            其他信息：
            <textarea v-model.lazy="userInfo.other">

            </textarea><br/><br/>
            <input type="checkbox" v-model="userInfo.protocal">阅读并接受用户协议：<a href="http://www.baidu.com" >用户协议</a><br/><br/>
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript">
        Vue.config.devtools = true
        const vm =new Vue({
            el: "#root",
            data(){
                return{
                    userInfo:{
                        account:"",
                        password:"",
                        age:0,
                        sex:"male",
                        hobby:[],
                        city:'请选择所属校区',
                        other:'',
                        protocal:''
                    }
                }
            },
            methods:{
                showInfo(){
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
    
</body>
</html>